<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="wallet">
{
  layout: 'tabbar',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '物联云',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false
  },
}
</route>

<script lang="ts" setup>
import { ref } from 'vue'
import { useToast } from 'wot-design-uni'
import ChangeDevice from '@/components/change-device.vue'
import ChargeOptions from '@/components/charge-options.vue'
import Kefu from '@/components/kefu.vue'
import { getNavBarHeight } from '@/utils/index'

defineOptions({
  name: 'Wallet',
})

const navBarHeight = getNavBarHeight()

// 获取屏幕边界到安全区域距离
// let safeAreaInsets
// let systemInfo

// // #ifdef MP-WEIXIN
// // 微信小程序使用新的API
// systemInfo = uni.getWindowInfo()
// safeAreaInsets = systemInfo.safeArea
//   ? {
//       top: systemInfo.safeArea.top,
//       right: systemInfo.windowWidth - systemInfo.safeArea.right,
//       bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
//       left: systemInfo.safeArea.left,
//     }
//   : null
// console.log('systemInfo', uni.getSystemInfoSync(), 'safeAreaInsets', safeAreaInsets)
// // #endif
const balance = ref(100)
const num = ref(0)
interface deviceInterface {
  device: string
  num: number
}
const device = ref<deviceInterface | null>(null)
function decrease() {
  if (num.value - device.value?.num >= 0) {
    num.value -= device.value.num
  }
}
function increase() {
  if (num.value + device.value?.num <= balance.value) {
    num.value += device.value.num
  }
}
const position = ref('A')

interface ListItem {
  num: number
  price: number
  id: string
}

const dataList: Array<ListItem> = [
  { price: 1, num: 1, id: 'cz1' },
  { price: 2, num: 2, id: 'cz2' },
  { price: 3, num: 3, id: 'cz3' },
  { price: 5, num: 5, id: 'cz5' },
  { price: 10, num: 10, id: 'cz10' },
  { price: 20, num: 20, id: 'cz20' },
  { price: 30, num: 30, id: 'cz30' },
  { price: 50, num: 50, id: 'cz50' },
] // 模拟充值数据列表

const toast = useToast()
function confirmTb() {
  if (num.value <= 0) {
    toast.warning('投币数不能为0')
    return
  }
  if (balance.value < num.value) {
    toast.warning('余币不足')
    return
  }
  toast.loading({
    loadingType: 'ring',
    msg: '投币中...',
  })
  setTimeout(() => {
    toast.success('投币成功,请操作机器！')
  }, 2000)
}

const showList = ref(false)
const chargeOptionsRef = ref()

function handleClose() {
  showList.value = false
  chargeOptionsRef.value.recharge = null
}
const recharge = ref<ListItem>()
function confirmCz() {
  if (!recharge.value?.price) {
    toast.warning('请选择充值金额')
    return
  }
  toast.loading({
    loadingType: 'ring',
    msg: '充值中...',
  })
  setTimeout(() => {
    toast.success('充值成功！')
    uni.navigateTo({
      url: '/pages/result/result',
    })
  }, 2000)
}
</script>

<template>
  <wd-toast />
  <view class="i-page" :style="{ paddingTop: `${navBarHeight}px` }">
    <view class="top-bg" />
    <view class="i-topper">
      <view class="i-left">
        <wd-img :width="30" :height="30" mode="heightFix" src="/static/images/G.png" />
        <view class="pl-0.5 pr-4">
          余币：{{ balance }}个
        </view>
        <wd-button size="small" custom-class="options-btn" @click="showList = true">
          充值
        </wd-button>
      </view>
      <view class="i-right text-[32rpx]">
        会员ID：vip8783126356
      </view>
    </view>
    <view class="device w-shadow">
      <view class="content">
        <view class="row flex-justify-between">
          <view>
            <text class="label inline-block">
              设备编号：
            </text>
            <template v-if="device">
              <text class="text-[#07c160] font-bold">
                {{ device.device }}
              </text><text class="text-26rpx text-[#3287e1] font-bold">
                （{{ device.num }}币 / 次）
              </text>
            </template>
            <text v-else class="text-28rpx color-[#6d6d6d]">
              请选择设备
            </text>
          </view>
          <ChangeDevice class="flex" @change="(val) => device = val" />
        </view>
        <view class="row flex">
          <view class="label">
            投币数：
          </view>
          <view class="option-btn" @click="decrease">
            <wd-icon name="remove" size="22px" />
          </view>
          <view class="box">
            <view class="num-box">
              {{ num }}
            </view>
          </view>
          <view class="option-btn" @click="increase">
            <wd-icon name="add1" size="22px" />
          </view>
        </view>
        <view class="row">
          <view class="label">
            投币位置：
          </view>
          <wd-radio-group v-model="position" inline shape="dot" checked-color="#4ea2e6">
            <wd-radio value="A">
              A口（左）
            </wd-radio>
            <wd-radio value="B">
              B口（右）
            </wd-radio>
          </wd-radio-group>
        </view>
        <view class="pt-20rpx">
          <wd-button custom-class="primary-btn" block @click="confirmTb">
            确认投币
          </wd-button>
        </view>
      </view>
    </view>
  </view>
  <wd-popup v-model="showList" position="bottom" custom-style="border-radius:32rpx;background:transparent;" @close="handleClose">
    <view class="c-box">
      <view class="c-close" @click="handleClose">
        <wd-icon name="error-fill" size="30px" color="#ffffff" />
      </view>
      <wd-img width="100%" src="/static/images/cz-bg.png" mode="widthFix" />
      <view class="c-container">
        <view class="chargeOptions">
          <ChargeOptions ref="chargeOptionsRef" :list="dataList" @change="item => recharge = item" />
          <view class="p-20rpx">
            <wd-button custom-class="custom-shadow" block @click="confirmCz">
              确认充值
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </wd-popup>
  <Kefu />
</template>

<style lang="scss" scoped>
:deep(){
    .options-btn {
      height: 50rpx;
      line-height: 50rpx;
        font-size: 26rpx !important;
        background-color: #e89a15 !important;
      }
      .primary-btn{
        font-size: 28rpx !important;
        background-color: #4ea2e6 !important;
      }
  }

.i-page {
  position: relative;
}
.top-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200rpx;
  background-image: linear-gradient(129deg, #0876ff, #78dcec);
}
.i-topper {
  padding-bottom: env(safe-area-inset-top);
  background-color: #3287e1;
  // background-image: url('http://pay.superiid.com/images/bg.png');
  background-image: linear-gradient(129deg, #0876ff, #78dcec);
  background-position: left;
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-size:24rpx;
  padding: 65rpx 30rpx;
  border-radius: 0 0 70rpx 70rpx;
  .inner{

  }
  .i-left{
    display: flex;
    align-items: center;
    padding-bottom: 16rpx;
    font-size: 40rpx;
    font-weight: bold;
  }
  :deep(){
      .options-btn {
          height: 48rpx !important;
        }
    }

}
.device{
  // background-color: #d4edda;
  background-color: #ffffff;
  margin: 20rpx;
  padding: 40rpx 20rpx;
  border-radius: 4px;
  color: rgb(19, 18, 18);
  .content{
    padding: 30rpx 0;
    .tips {
      font-size: 26rpx;
      color: red;
      padding: 40rpx 15rpx 20rpx;
    }
  }
  .row {
    display: flex;
    align-items: center;
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    border-bottom: 1px solid #cacaca;
    .label {
      width: 170rpx;
      text-align: right;
      padding-right: 10rpx;
    }
  }
}
.i-container{
  background-color: #ffffff;
  margin: 20rpx;
  padding: 50rpx 15rpx 30rpx;
  border-radius: 4px;
}
.option-btn{
  height: 45rpx;
  background-color: #4ea2e6;
  border-radius: 4px;
  padding: 0 20rpx;
  color: #ffffff;
  display: flex;
  align-items: center;
}
.box {
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 28rpx;
  .num-box {
    border-radius: 4px;
    border: 1px solid #ececec;
    width: 50px;
    height: 45rpx;
    line-height: 45rpx;
    text-align: center;
    margin-right: 6px;
    color: red;
  }
}
// .list{
//   .item {
//     position: relative;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     border: 1px solid #07c160;
//     padding: 12rpx 8rpx;
//     border-radius: 4px;
//     margin-bottom: 10px;
//     color: #07c160;
//     font-weight: bold;
//     background-color: #eaf7e8;
//     .cz-icon{
//       transform: rotate(-25deg);
//     }
//     .hot {
//       position: absolute;
//       right: 0;
//       top: 0;
//     }
//   }
//   .item.active {
//     background-color: #07c160;
//     color: #ffffff;
//   }
// }
.c-box {
  position: relative;
  display: flex;
  flex-direction: column;
  .c-close {
    position: absolute;
    right: 20rpx;
    top: 245rpx;
    z-index: 999;
  }
}
.c-container {
  background-color: #70b2e9;
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-top: 30rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  flex:1;
  margin-top: -10rpx;
  .chargeOptions {
    background-color: #ffffff;
    padding: 40rpx 20rpx 20rpx;
    border-radius: 50rpx;
    :deep(){
      .custom-shadow {
        font-size: 28rpx !important;
          background-color: #50a9f1 !important;
        }
    }
  }
}
</style>
